<script setup lang="ts">
import { computed, reactive } from '@vue/reactivity';
import {
  NModal,
  NInput,
  NButton,
  NForm,
  NFormItem,
  FormInst,
  NInputNumber,
  NSelect
} from 'naive-ui';
import { ref } from 'vue';

const props = defineProps<{
  value: boolean
}>()
const emit = defineEmits<{
  (event: 'update:value', v: boolean): void,
  (event: 'ok', args: any): void
}>()

const formRef = ref(null as unknown as FormInst)
const show = computed(() => props.value)
const page = reactive({
  name: '',
  width: 1080,
  height: 64,
  placement: 'bottom-center'
})
const PlacementOptions = [
  { label: 'bottom-center', value: '底部居中' },
  { label: 'top-center', value: '顶部居中' },
  { label: 'left-center', value: '左边居中' },
  { label: 'right-center', value: '右边居中' }
]
const rules = {
  name: [{
    required: true,
    validator(rule: any, value: string) {
      if (!value) {
        return new Error('必须输入页面名')
      } else if (value.length < 2) {
        return new Error('页面名太短')
      } else if (value.length > 32) {
        return new Error('页面名太长')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  width: [{
    required: true,
    validator(rule: any, value: number) {
      if (!value) {
        return new Error('必须输入宽度')
      } else if (!/^\d*$/.test(value + '')) {
        return new Error('宽度应该为整数')
      } else if (value < 240 || value > 5120) {
        return new Error('宽度设置范围 [240, 5120]')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  height: [{
    required: true,
    validator(rule: any, value: number) {
      if (!value) {
        return new Error('必须输入高度')
      } else if (!/^\d*$/.test(value + '')) {
        return new Error('高度应该为整数')
      } else if (value < 64 || value > 1440) {
        return new Error('高度设置范围 [64, 1440]')
      }
      return true
    },
    trigger: ['input', 'blur']
  }],
  placement: [{
    required: true,
    message: '必须输入位置',
    trigger: ['input', 'blur']
  }]
}

function onClose() {
  emit('update:value', false)
}

async function onOk() {
  try {
    await formRef.value.validate()
    emit('ok', page)
  } catch {
    //
  }
}

</script>
  
<template>
  <div class="add-game">
    <n-modal :show="show" class="add-page-card" preset="card" title="添加游戏" :mask-closable="false" size="small"
      :close-on-esc="false" :closable="false" :bordered="false" :segmented="{
        content: 'soft'
      }">
      <n-form ref="formRef" class="page-options" label-placement="left" :model="page" :rules="rules">
        <n-form-item path="name" label="名称">
          <n-input placeholder="请输入页面名称" v-model:value="page.name" />
        </n-form-item>
        <n-form-item path="name" label="地址">
          <n-input placeholder="请输入页面地址" v-model:value="page.name" />
        </n-form-item>
        <n-form-item path="width" label="宽度">
          <n-input-number v-model:value="page.width" :show-button="false" />
        </n-form-item>
        <n-form-item path="height" label="高度">
          <n-input-number v-model:value="page.height" :show-button="false" />
        </n-form-item>
        <n-form-item path="placement" label="位置">
          <n-select v-model:value="page.placement" :options="PlacementOptions"></n-select>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-button strong secondary type="tertiary" @click="onClose">
          取消
        </n-button>
        <n-button strong secondary type="primary" @click="onOk">
          确定
        </n-button>
      </template>
    </n-modal>
  </div>
</template>
  
<style lang="less">
.add-page-card {
  -webkit-app-region: none !important;
  width: 240px;

  .n-card__footer {
    display: flex;
    justify-content: flex-end;

    button {
      margin-left: 8px;
    }
  }
}
</style>
  